<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost:8888/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">


</head>

<body>
<div class="pd-20">
    <form action="xxxxx" method="post" class="form form-horizontal" id="form-user-add">

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="华为手机" placeholder="" id="gname" name="gname" datatype="*" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品类别：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="gtype" size="1">
					<option value="0">手机</option>
					<option value="1">电脑</option>
					<option value="2">电视</option>
					<option value="3">冰箱</option>
					<option value="4">口红</option>
				</select>
				</span> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品图片：</label>
            <div class="formControls col-5">
                <input type="hidden" name="gpic" id="gpic" value="">
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="100" placeholder="" id="gstock" name="gstock" datatype="n" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="99.99" placeholder="" id="gprice" name="gprice" datatype="*" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品描述：</label>
            <div class="formControls col-5">
                <textarea name="gdesc"  cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/formutils.js"></script>
<!--引入JS-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript">


    // 初始化Web Uploader
    var uploader = WebUploader.create({
        auto: true,
        // 文件接收服务端。
        server: 'http://localhost/shop-resources/fileUpload/createFile',
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {

        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');

        var $list= $("#fileList");

        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100);
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file,resp) {

        // 1.先获取文件的路径
        var filePath = $("#gpic").val();

        if(!filePath){ // ""
            $("#gpic").val(resp._raw)
        }else{
            $("#gpic").val(filePath+"|"+resp._raw);
        }
    });

    $(function(){
        $("#form-user-add").Validform({
            tiptype:2,
            callback:function(form){ // 表单验证成功后提交
                submit("http://localhost/shop-back/goods/addGoods",form)
                return false; // 返回false表单不会提交
            }
        });
    });
</script>
</body>
</html>